/* code section */

:root {
	--code-container-background-color: #282c34; /*#1E1E1E;*/
	--code-section-background-color: #282c34;
	--code-color: #abb2bf;
	--code-comment-color: #5c6370;
	--code-keyword-color: #c678dd;
	--code-name-color: #e06c75;
	--code-literal-color: #56b6c2;
	--code-string-color: #98c379;
	--code-variable-color: #d19a66;
	--code-symbol-color: #61aeee;
	--code-class-color: #e6c07b;
	--code-line-height: 1.6;
	--code-line-color: rgb(253, 247, 247);
	--code-font-size: 0.9rem;
	--code-padding: 8px;
	--code-border-radius: 6px;
	--code-banner-display: inline-block;
	--code-border-color: rgb(166, 166, 166);
	--code-border-width: 0.5px;
}

.wewrite code {
	display: inline;
	color: var(--code-color, rgb(153, 153, 153));
	line-height: var(--code-line-height, 1.6);
}

.wewrite .code-container {
	display: flex;
	flex-direction: column;
	border-radius: var(--code-border-radius, 4px);
	background: var(--code-container-background-color, #1E1E1E);
	box-shadow: rgba(0, 0, 0, 0.55) 0px 10px 10px -10px;
	border-width: var(--code-border-width);
	border-style: solid;
	border-color: var(--code-border-color);
}


.wewrite .code-section-banner {
	background-image: url('https://mmbiz.qpic.cn/mmbiz_svg/QAm7hEbaujTQuIH8VVl7W7PicH14grAZxd7oUx579CB2wpytwlLSpiaq2DXBpNUz8R6ckkAuO8tBLr52XjAsvR67mh3oibs2dYK/640?wx_fmt=svg&from=appmsg&tp=webp&wxfrom=15&wx_lazy=1');
	background-position: 10px 10px;
	background-size: 40px auto;
	background-repeat: no-repeat;
	display: var(--code-banner-display, inline-block);
	height: 32px;
	width: 100%;
	border-bottom: solid 0.5px var(--code-color, rgb(153, 153, 153));
}

.wewrite .code-section {
	display: flex;
	flex-grow: 1;
	font-size: var(--code-font-size, 0.9rem);
	line-height: var(--code-line-height, 1.6);
	border-radius: var(--code-border-radius, 4px);
}

.wewrite .code-section pre {
	position: relative;
	padding: 2px;
	margin: 0;
	flex: 1;
	overflow: auto;
	border-bottom-left-radius: var(--code-border-radius, 4px);
	border-bottom-right-radius: var(--code-border-radius, 4px);

}


.wewrite .code-section code {
	display: block;
	padding: 10px 5px !important;
	padding-left: .5em;
	font-family: Consolas, Monaco, Menlo, monospace;
	text-wrap: nowrap;
}

.wewrite .code-section ul {
	padding-top: var(--code-padding, 8px);
	padding-bottom: var(--code-padding, 8px);
	position: relative;
	overflow: hidden;
	background: var(--code-section-background-color, #282c34)!important;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	counter-reset: line;
	margin: 0;
	padding: 10px 0 0 0;
	white-space: normal;
	width: fit-content;
	user-select: none;
	border-right: solid 0.5px  rgb(166, 166, 166);
	padding-right: 5px;
	color: var(--code-line-color, green);
	border-bottom-left-radius: var(--code-border-radius, 4px);
}

.wewrite .code-section ul>li {
	position: relative;
	margin: 0;
	display: list-item;
	text-align: right;
	text-wrap: nowrap;
	line-height: var(--code-line-height, 1.6);
	font-size: var(--code-font-size, 0.9rem);
	font-family: Menlo-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
	list-style-type: none;
	color: var(--code-line-color, red);
	padding-left: 1rem;
	
}

.wewrite .code-section ul>li::marker {
	content: none;
}

.wewrite pre code .hljs {
	display: block;
	overflow-x: auto;
	padding: 1em
}

.wewrite code .hljs {
	padding: 3px 5px
}

/*
  
  Atom One Dark by Daniel Gamage
  Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
  
  base:    #282c34
  mono-1:  #abb2bf
  mono-2:  #818896
  mono-3:  #5c6370
  hue-1:   #56b6c2
  hue-2:   #61aeee
  hue-3:   #c678dd
  hue-4:   #98c379
  hue-5:   #e06c75
  hue-5-2: #be5046
  hue-6:   #d19a66
  hue-6-2: #e6c07b
  
  */
.wewrite .hljs {
	color: var(--code-color, #abb2bf);
	background: var(--code-section-background-color, #282c34)
}

.wewrite .hljs-comment,
.wewrite .hljs-quote {
	color: var(--code-color, #5c6370);
	font-style: italic
}

.wewrite .hljs-doctag,
.wewrite .hljs-keyword,
.wewrite .hljs-formula {
	color: var(--code-keyword-color, #c678dd)
}

.wewrite .hljs-section,
.wewrite .hljs-name,
.wewrite .hljs-selector-tag,
.wewrite .hljs-deletion,
.wewrite .hljs-subst {
	color: var(--code-name-color, #e06c75)
}

.wewrite .hljs-literal {
	color: var(--code-literal-color, #56b6c2)
}

.wewrite .hljs-string,
.wewrite .hljs-regexp,
.wewrite .hljs-addition,
.wewrite .hljs-attribute,
.wewrite .hljs-meta .wewrite .hljs-string {
	color: var(--code-string-color, #98c379)
}

.wewrite .hljs-attr,
.wewrite .hljs-variable,
.wewrite .hljs-template-variable,
.wewrite .hljs-type,
.wewrite .hljs-selector-class,
.wewrite .hljs-selector-attr,
.wewrite .hljs-selector-pseudo,
.wewrite .hljs-number {
	color: var(--code-variable-color, #d19a66)
}

.wewrite .hljs-symbol,
.wewrite .hljs-bullet,
.wewrite .hljs-link,
.wewrite .hljs-meta,
.wewrite .hljs-selector-id,
.wewrite .hljs-title {
	color: var(--code-symbol-color, #61aeee)
}

.wewrite .hljs-built_in,
.wewrite .hljs-title.class_,
.wewrite .hljs-class .wewrite .hljs-title {
	color: var (--code-class-color, #e6c07b)
}

.wewrite .hljs-emphasis {
	font-style: italic
}

.wewrite .hljs-strong {
	font-weight: bold
}

.wewrite .hljs-link {
	text-decoration: underline
}
